﻿@model Kooboo.CMS.Content.Models.MediaContent
@{
    var imagePreviewUrl = Url.Action("Preview", "MediaContent", ViewContext.RequestContext.AllRouteValues().Merge("UUID", Model.UUID));
    var originalImage=String.Format("{0}?t={1}", Model.Url, DateTime.Now.Ticks);
}
<div class="block common-form">
    <div id="editImage" class="image-editor">
        <table>
            <tr>
                <th>@("File name".Localize())</th>
                <td>@Model.FileName</td>
            </tr>
            <tr>
                <th>
                    @("URL".Localize())
                </th>
                <td>
                    @Model.Url
                </td>
            </tr>
            <tr>
                <th>
                    <label>@( "Original dimensions".Localize())</label>
                </th>
                <td>
                    <div id="display_Originaldimensions" class="left">
                        <span class="left"></span>
                        <a class="action" href="#" data-inline-action='{"show":"#edit_Originaldimensions","hide":"#display_Originaldimensions"}'>@Html.IconImage("edit small")</a>
                    </div>
                    <div id="edit_Originaldimensions" class="left hide">
                        @using (Html.BeginForm("EditImage", "MediaContent", ViewContext.RequestContext.AllRouteValues()))
                        {
                            <input type="text" id="Scale_Width" name="Scale.Width" class="mini" data-val="true" data-val-number="" />
                            <span class="left">x</span>
                            <input type="text" id="Scale_Height" name="Scale.Height" class="mini" data-val="true" data-val-number="" />
                            <a class="action" data-ajaxform="">@Html.IconImage("save small")</a>
                            <a class="action" href="#" data-inline-action='{"show":"#display_Originaldimensions","hide":"#edit_Originaldimensions"}'>@Html.IconImage("minus small")</a>
                        }
                    </div>
                </td>
            </tr>
            <tr id="display_Image">
                <th></th>
                <td>
                    <div id="imageInfo" class="original-image">
                        <img src="@originalImage" />
                    </div>
                    <a id="editImageButton" class="button" href="#" data-inline-action='{"show":"#edit_Image","hide":"#display_Image"}'>@("Edit".Localize())</a>
                </td>
            </tr>
            <tr id="edit_Image" class="hide">
                <th>
                    <label>@("Image crop".Localize())</label>
                </th>
                <td>
                    @using (Html.BeginForm("EditImage", "MediaContent", ViewContext.RequestContext.AllRouteValues()))
                    {
                        <input type="hidden" id="rotateTypes" name="rotateTypes" />
                        <div class="image-crop">
                            <div class="toolbar">
                                <ul class="tool clearfix">
                                    <li><a href="#" class="rotateFlip anticlockwise" rotatetype="1" title="Rotate anticlockwise">@Html.IconImage("rotate anti")</a></li>
                                    <li><a href="#" class="rotateFlip clockwise" rotatetype="2" title="Rotate clockwise">@Html.IconImage("rotate")</a></li>
                                    <li><a href="#" class="rotateFlip flip-vertically" rotatetype="3" title="Flip vertically">@Html.IconImage("flip y")</a></li>
                                    <li><a href="#" class="rotateFlip flip-horizontally" rotatetype="4" title="Flip horizontally">@Html.IconImage("flip x")</a></li>
                                    <li><a href="#" title="Undo">@Html.IconImage("undo")</a></li>
                                    <li><a href="#" title="Redo">@Html.IconImage("redo")</a></li>
                                </ul>
                                <ul class="image-info clearfix">
                                    <li>
                                        <label>@Html.Raw("X".Localize()):</label>
                                        <input type="text" id="Crop_X" name="Crop.X" readonly="readonly" class="mini" />
                                    </li>
                                    <li>
                                        <label>@Html.Raw("Y".Localize()):</label>
                                        <input type="text" id="Crop_Y" name="Crop.Y" readonly="readonly" class="mini" />
                                    </li>
                                    <li>
                                        <label>@Html.Raw("Selection".Localize()):</label>
                                        <input type="text" id="Crop_Width" name="Crop.Width" readonly="readonly" class="mini" />
                                        <span class="left">x</span>
                                        <input type="text" id="Crop_Height" name="Crop.Height" readonly="readonly" class="mini" />
                                    </li>
                                    @*<li>
                                        <label>@Html.Raw("Aspect ratio".Localize()):</label>
                                        <input type="text" id="Ratio_Width" class="mini" data-val="true" data-val-number="" />
                                        <span class="left">x</span>
                                        <input type="text" id="Ratio_Height" class="mini" data-val="true" data-val-number="" />
                                    </li>*@
                                </ul>
                            </div>
                            <div class="container">
                                <img id="jcrop_target" src="@imagePreviewUrl" alt="@( Model.Metadata == null ? "" : Model.Metadata.AlternateText)" />
                            </div>
                        </div>
                        <a class="button" data-ajaxform="">@("Save".Localize())</a>
                        <a id="cancelEditButton" class="button gray" href="#" data-inline-action='{"show":"#display_Image","hide":"#edit_Image"}'>@("Cancel".Localize())</a>
                    }
                </td>
            </tr>
        </table>
    </div>
    @using (Html.BeginForm("Edit", "MediaContent", ViewContext.RequestContext.AllRouteValues(), FormMethod.Post, new RouteValueDictionary(new { id = "metadataForm" })))
    {
        <table>
            <tbody>
                @(Html.EditorFor(m => m.Metadata.AlternateText, new { HtmlAttributes = new { @class = "extra-long" } }))
                @(Html.EditorFor(m => m.Metadata.Description, new { HtmlAttributes = new { @class = "extra-large" } }))
            </tbody>
        </table>
    }
</div>
<script type="text/javascript">
    $(function () {
        $('table').gridInlineEdit();
        $('#Scale_Width').keyup(function () {
            var input = $(this);
            var val = input.val();
            if (val.trim() != '') {
                var width = parseFloat(val);
                var height = Math.round(width / width_height_ratio);
                $('#Scale_Height').val(height);
            }
        });
        $('#Scale_Height').keyup(function () {
            var input = $(this);
            var val = input.val();
            if (val.trim() != '') {
                var height = parseFloat(val);
                var width = Math.round(height * width_height_ratio);
                $('#Scale_Width').val(width);
            }
        });
        $('#ClearScale').click(function () {
            $('#Scale_Width').val('');
            $('#Scale_Height').val('');
            return false;
        });

        var width, height, width_height_ratio, jcrop_api, imagePreviewUrl = "@Html.Raw(imagePreviewUrl)";
        var rotates = [];
        var undoRotates = [];

        var defaults = {
            onChange: SetCoordinate,
            onSelect: SetCoordinate,
            boxWidth: 800
        };
        function SetCoordinate(c) {
            $('#Crop_X').val(Math.round(c.x));
            $('#Crop_Y').val(Math.round(c.y));
            $('#Crop_Width').val(Math.round(c.w));
            $('#Crop_Height').val(Math.round(c.h));
        }
        var dummy = new Image();
        dummy.src = "@originalImage";
        $(dummy).on("load", function () {
            width = dummy.width;
            height = dummy.height;            
            width_height_ratio = width / height;
            $("#display_Originaldimensions > span").html(width + " x " + height);
            $("#Scale_Width").val(dummy.width);
            $("#Scale_Height").val(dummy.height);
            $.extend(defaults, { trueSize: [dummy.width, dummy.height] });
        });

        function setJscrop(option) {
            var options = $.extend({}, defaults, option);
            $('#jcrop_target').Jcrop(options, function () {
                var $self = this;
                jcrop_api = $self;
                $self.setImage($('#jcrop_target').attr("src"), function () { });
            });
        }
        function setJcropRatio() {
            var width = parseFloat($('#Ratio_Width').val());
            var height = parseFloat($('#Ratio_Height').val());
            if (!isNaN(width) && !isNaN(height)) {
                setJscrop({
                    aspectRatio: width / height
                });
            }
            else {
                setJscrop({
                    aspectRatio: null
                });
            }
        }
        $('#Ratio_Width').keyup(function () {
            setJcropRatio();
        });
        $('#Ratio_Height').keyup(function () {
            setJcropRatio();
        });
        $('#editImageButton').on("click", function () {
            setJcropRatio();

            $('#ClearCrop').click(function () {
                jcrop_api && jcrop_api.release();
            });

            reloadImage = function () {
                var types = rotates.join(',');
                $('#rotateTypes').val(types);
                jcrop_api && jcrop_api.setImage(imagePreviewUrl + "&rotateTypes=" + types + "&t=" + (new Date()).getTime());
            };
            $('.rotateFlip').click(function () {
                var element = $(this);
                var $jcrop_target = $("#jcrop_target");
                rotates.push(element.attr("rotatetype"));
                reloadImage();
            });
            $('.undo').click(function () {
                if (rotates.length > 0) {
                    undoRotates.push(rotates.pop());
                    reloadImage();
                }
            });
            $('.redo').click(function () {
                if (undoRotates.length > 0) {
                    rotates.push(undoRotates.pop());
                    reloadImage();
                }
            });
        });

        $('#cancelEditButton').click(function () {
            rotates = [];
            undoRotates = [];
            jcrop_api && jcrop_api.release();
            $('#Crop_X').val('');
            $('#Crop_Y').val('');
            $('#Crop_Width').val('');
            $('#Crop_Height').val('');
            if (jcrop_api) {
                jcrop_api.destroy();
            }
            return false;
        });

    });
</script>
